<template>
  <div>
    <van-nav-bar
      fixed
      title="下拉选择,上拉加载下拉刷新"
      left-text
      right-text="按钮"
      left-arrow
      @click-right="onClickRight"
    />
    
    <!-- 下拉选择 -->
    <van-field
      readonly
      clickable
      label="城市"
      :value="value"
      v-model="countrys"
      placeholder="选择城市"
      @click="showPicker = true"
    />

    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
    <!-- 时间选择 -->

    <van-field label="时间" v-model="timeValue" @click="showPopFn()" placeholder="选择的日期结果" readonly />
    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        @change="changeFn()"
        @confirm="confirmFn()"
        @cancel="cancelFn()"
      />
    </van-popup>

    <!-- 加载 -->
    <div style="height:60vh;">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" @load="onLoad">
          <!-- 加载的内容-->
          <van-cell v-for="(item,index) in deviceList" :key="index" :title="item.name" />
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import moment from "moment";
import qs from "qs";
import { Picker, List, NavBar, PullRefresh, DatetimePicker } from "vant";
export default {
  components: {
    [Picker.name]: Picker,
    [List.name]: List,
    [NavBar.name]: NavBar,
    [PullRefresh.name]: PullRefresh,
    [DatetimePicker.name]: DatetimePicker
  },
  data() {
    return {
      value: "",
      showPicker: false, //城市
      columns: [],
      // list: [],
      countrys: "",
      countryid: "",
      deviceList: [], //用于存放加载的数据
      totalPage: 0,
      pageNumber: 20,
      loading: false, //控制上拉加载的加载动画
      finished: false, //控制在页面往下移动到底部时是否调用接口获取数据
      isLoading: false, //控制下拉刷新的加载动画
      // 时间选择
      currentDate: new Date(),
      changeDate: new Date(),
      show: false, // 用来显示弹出层
      timeValue: moment(new Date()).format("YYYY-MM-DD")
    };
  },
  created() {
    this.enterLogin();
    this.rolling();
  },
  computed: {
    user() {
      return JSON.parse(this.$store.state.userMsg);
    }
  },
  mounted() {
    this.timeFormat(new Date("YYYY-MM-DD"));
  },

  methods: {
    showPopFn() {
      this.show = true;
    },
    showPopup() {
      this.show = true;
    },
     // 值变化是触发
    changeFn() {    
      this.changeDate = this.currentDate; // Tue Sep 08 2020 00:00:00 GMT+0800 (中国标准时间)
    },
      // 确定按钮
    confirmFn() {    
      this.timeValue = this.timeFormat(this.currentDate);
      console.log(this.timeValue,"时间")
      this.show = false;
    },
    // 关闭按钮
    cancelFn() {
      this.show = false;
    },
    // 时间格式化 2019-09-08
    timeFormat(time) {    
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      return year + '-' + month + '-' +  '0' + day + '';
    },

    
    // 点击按钮
    onClickRight() {
      this.$router.push({path:"./Uploader"})
    },
    // 城市
    onConfirm(value, index) {
      this.countrys = value;
      this.countryid = index;
      this.showPicker = false;
      console.log(this.countrys, "地区");
      console.log(this.countryid, "地区id");
    },
    // 时间

    // 城市下拉选择接口
    enterLogin() {
      let that = this;
      that.$axios
        .get(that.address.listCountry, {
          params: {
            page: 1,
            rows: 239
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            const list = res.data.data;
            for (const i in list) {
              const items = list[i];
              const name = items.name;
              this.columns.push(items.name);
            }
          } else {
          }
        });
    },

    // 滚动加载国家
    rolling() {
      let that = this;
      that.$axios
        .get(that.address.listCountry, {
          params: {
            page: 1,
            rows: that.pageNumber + 1
          }
        })
        .then(res => {
          console.log("加载");
          if (res.data.code == 200) {
            that.deviceList = res.data.data;
            that.isLoading = false; //关闭下拉刷新效果
          }
        });
    },
    // 下拉刷新
    onRefresh() {
      let self = this;
      setTimeout(() => {
        self.totalPage = 0;
        self.pageNumber++;
        self.rolling(); //加载数据
      }, 500);
    },
    // 加载
    onLoad() {
      let that = this;
      setTimeout(() => {
        that.$axios
          .get(that.address.listCountry, {
            params: {
              page: 1,
              rows: that.pageNumber + 1
            }
          })
          .then(res => {
            console.log("加载");
            if (res.data.code == 200) {
              that.deviceList = res.data.data;
              that.loading = false;
              that.pageNumber++;
              if (that.pageNumber >= that.deviceList.count) {
                that.finished = true;
              }
            }
          });
      }, 500);
    }
  }
};
</script>
<style lang="less" scope>
</style>